/**
 * Created by Void on 2017/9/19.
 */

import {
    Component, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef, Renderer2, Input,
    Output, EventEmitter
} from "@angular/core";
import {Platform} from "ionic-angular/index";
import {SuperTabsConfig} from "./super-tabs";
import {THIS_EXPR} from "@angular/compiler/src/output/output_ast";

@Component({
    selector: 'super-tabs-container',
    template: `
<div #container>
<ng-content></ng-content>
</div>
`,
    encapsulation: ViewEncapsulation.None
})

export class SuperTabsContainer implements AfterViewInit {

    @Input() config: SuperTabsConfig;
    @Input() tabsCount:number = 0;
    @Input() selectedTabIndex: number;

    @Output() tabSelect: EventEmitter<{index:number;changed:boolean;}> = new EventEmitter<{index:number;changed:boolean;}>();
    @Output() onDrag:EventEmitter<TouchEvent> = new EventEmitter<TouchEvent>();

    @ViewChild('container') container: ElementRef;

    /**
     * single tab width
     */
    tabWidth:number = 0;
    containerWidth:number = 0;
    containerPosition:number = 0;

    private minPosX:number;
    private maxPosX:number;

    constructor(
        private el:ElementRef,
        private plt:Platform,
        private rnd:Renderer2
    ) {
    }

    ngAfterViewInit() {
        this.init();
    }

    private init(){
        this.refreshDimensions();

        // todo 添加手势
    }
    private calculateContainerWidth (){
        this.containerWidth = this.tabWidth * this.tabsCount;
    }
    private setContainerWidth () {
        this.rnd.setStyle(this.container.nativeElement,'width',this.containerWidth + 'px');
    }
    private refreshMinMax (){
        this.minPosX = 0;
        this.maxPosX = (this.tabsCount - 1) * this.tabWidth;
    }

    refreshDimensions () {
        this.calculateContainerWidth();
        this.setContainerWidth();
        this.refreshMinMax();
    }

    getNativeElement(): HTMLElement {
        return this.el.nativeElement;
    }

    slideTo(index:number,animate:boolean = true):void{
        // requestAnimationFrame 制作动画更流畅
        this.plt.raf(() => this.moveContainer(animate, index * this.tabWidth));
    }

    private moveContainer(animate:boolean = false,positionX?:number,callBack:Function = () => {}){
        const el:HTMLElement = this.container.nativeElement;
        if (animate){
            if (el.style[this.plt.Css.transform].indexOf('all') === -1){
                // 设置动画的 时长 方式
                this.rnd.setStyle(el,this.plt.Css.transition,`all ${this.config.transitionDuration}ms ${this.config.transitionEase}`);
            }
            // 设置元素 3D位移 (X,Y,Z)
            this.rnd.setStyle(el,this.plt.Css.transform,`translate3d(${-1 * positionX}px, 0, 0)`);
            this.containerPosition = positionX;
        }else {
            if (positionX){
                this.containerPosition = positionX;
            }

            if (el.style[this.plt.Css.transform].indexOf('initial') !== -1){
                this.rnd.setStyle(el,this.plt.Css.transition,'initial'); // 设置为默认值
            }

            this.containerPosition = Math.max(this.minPosX,Math.min(this.maxPosX,this.containerPosition));
            this.rnd.setStyle(el,this.plt.Css.transform,`translate3d(${-1 * this.containerPosition}px, 0, 0)`);
        }
        callBack();
    }
}